{% extends 'index.html' %}
{% load static %}
{% block mycss %}
    <script type="text/javascript" src="{% static 'js/echarts/jquery-3.2.1.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/echarts/echarts.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/datashow.js' %}"></script>

{% endblock %}
{% block title %}
    <span class="navbar-page-title" id="datashow_title"></span>
{% endblock %}
{% block content %}


    <div class="container-fluid">

        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-xs-2"><input type="text" placeholder="请输入开始节点名称" id="start_point"
                                                         class="form-control my-input"></div>
                            <div class="col-xs-2"><input type="text" placeholder="请输入结束节点名称" id="end_point"
                                                         class="form-control my-input"></div>
                            <div class="col-xs-2"><input type="text" placeholder="请输入最大跳数" id="max_num"
                                                         class="form-control my-input"></div>
                            <div class="col-xs-2">
                                            <button class='btn btn-primary my-btn' type="submit" id="noumenon_serach">查询 </button>
                            </div>
                        </div>


                    </div>
                </div>
            </div>
        </div>
        <div id="main" style="width: 100%;height: calc(100vh - 215px)"></div>
    </div>


{% endblock %}
{% block myjs %}
    <script type="text/javascript">
        var sign = "{{ sign }}";
        if (sign === "0") {
            document.getElementById("jsxqtpfx").style.display = 'block';
            document.getElementById("gltfx").style.backgroundColor = 'rgba(30,21,21,0.44)';
            $("#datashow_title").text("军事需求图谱分析 - 关联图分析");
        } else if (sign === "1") {
            document.getElementById("zstpfwjk").style.display = 'block';
            document.getElementById("zstpfxfw").style.backgroundColor = 'rgba(30,21,21,0.44)';
            $("#datashow_title").text("知识图谱服务接口 - 知识图谱分析服务");
        }


        $('#noumenon_serach').click(function () {
            var start_point = $('#start_point').val();
            var end_point = $('#end_point').val();
            var max_num = $('#max_num').val();
            var formdata = new FormData();
            formdata.append("start_point", start_point);
            formdata.append("end_point", end_point);
            formdata.append("max_num", max_num);


            $.ajax({
                url: '{% url 'association_analysis' %}',
                type: 'POST',
                async: false,
                data: formdata,
                processData: false, // 使数据不做处理
                contentType: false, // 不要设置Content-Type请求头
                success: function (data) {
                    {#todo 执行函数#}

                    atlas(data.data.nodes, data.data.edges,'main')
                },
                error: function (response) {
                    console.log(response);
                }
            });
        })
    </script>
    <script type="text/javascript">





    </script>
{% endblock %}
